<template>
  <main>
    <van-nav-bar
      title="最近在学"
      left-arrow
      @click-left="onClickLeft"
    />
    <span @click="onClickEdit">{{showEdit ? '完成' : '编辑' }}</span>
    <div class="art-box" @click="router.push('/vc')">
      <van-checkbox
        class="boxleftcheck"
        v-show="showEdit"
        v-model="checked"
      ></van-checkbox>
      <div class="art-boxleft">
        <img src="@/assets/jl.png" alt="jl" class="img" />
      </div>
      <div class="art-boxright">
        <p>产品设计从入门到放弃</p>
        <ul>
          <li>
            <div>
              <el-progress
                status="exception"
                :percentage="20"
                style="width: 200px"
              >
                <el-button text>已学20%</el-button>
              </el-progress>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="bottombtn" v-show="showEdit">
      <button id="leftbtn">
        <van-checkbox class="bottomcheck" v-model="checked"></van-checkbox>全选
      </button>
      <button>确定删除</button>
    </div>
  </main>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref } from "vue";

const checked = ref(false);
const showEdit = ref(false);
const onClickEdit = () => {
  showEdit.value = !showEdit.value;
};
const router = useRouter();
const route = useRoute();
const onClickLeft = () => {
  router.push("/learn");
};
console.log(route.query.name);
</script>
<style lang="less" scoped>
#leftbtn {
  border-right: 1px solid #d5d5d5;
  color: black;
}
span{
    position: fixed;
    z-index: 1000;
    top: 1.5%;
    right: 5%;
    font-size: 56%;
    font-weight: 900;
}
.bottombtn {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  font-size: 2vh;
  border-top: 1px solid #d5d5d5;
  button {
    width: 50%;
    height: 50px;
    border: 0;
    text-align: center;
    background: white;
    color: rgb(0, 13, 255);
    .bottomcheck {
      display: inline-block;
      vertical-align: middle;
      margin-right: 1vh;
      margin-bottom: 0.7vh;
    }
  }
}
.art-box {
  padding: 15px 15px;
  display: flex;
  justify-content: space-between;
  .boxleftcheck {
    padding-right: 5px;
  }
  .art-boxleft {
    width: 120px;
    height: 75px;
    background-color: #666ee8;
    text-align: center;
    line-height: 75px;
    border-radius: 10px;
    margin-right: 5px;

    .img {
      width: 76px;
      height: 65px;
      align-items: center;
      vertical-align: middle;
    }
  }

  .art-boxright {
    width: 215px;
    height: 75px;
    border-radius: 10px;
    p {
      font-size: 14px;
    }
    ul {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      position: relative;
      top: 25px;
      color: #999999;
    }
  }
}
</style>